<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员信息</title>

    <link rel="stylesheet" href="/main/css/style.css">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <script src="/main/js/jquery-1.12.3.min.js"></script>

</head>
<body>
<!--fixed remove-->
<section class="fixed" style="z-index:999;width: 100%;height: 100%;background-color: #000;position: fixed;left: 0;top: 0;"></section>
<section class="register_page">
    <div class="header"><span class="header_logo"></span></div>
    <div class="member_info">
        <p class="title">激活立享会员特权</p>
        <p class="sub_title"><span>会员章程</span></p>
        <div class="form_info">
            <p>会员信息</p>
            <div class="form_group">
                <span class="form_control">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</span>
                <input type="text" class="w270" id="username" name="u_name" value="{%$user.username|default:''%}">
            </div>
            <div class="form_group">
                <span class="form_control">手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机</span>
                <input type="text" class="w270" id="mobile" name="u_mobile" value="{%$user.mobile|default:''%}">

            </div>

            <div class="form_group">
                <span class="form_control">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                <!--生日年月日-->
                <div id="myBirthday" class="box">
                    {%$user.birthday|default:''|date_format:'%Y-%m-%d'%}
                </div>
            </div>

            <div class="form_group gendar_1">
                <span class="form_control">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
                <label for="male" class="ordinary ordinary_focus"><input  type="radio" id="male" name="gender" {%if $user.sex eq '男'%}checked{%/if%}  id="male" value="男">男</label>
                <label for="female" class="ordinary"><input type="radio" name="gender" id="female" {%if $user.sex eq '女'%}checked{%/if%} value="女">女</label>
            </div>
            <div class="form_group">
                <span class="form_control">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</span>
                <div id="city" class="l_city">
                    <select class="prov item_ele"></select>
                    <select class="city item_ele" disabled="disabled"></select>
                    <select class="dist item_ele" disabled="disabled"></select>
                </div>
            </div>
            <div id="babyInfo">
                {%if $baby|@count neq 0 %}
                {%foreach $baby as $key=>$value%}
                <div name="baby_{%$key+1%}" attrid="{%$value.cid|default:0%}" class="babydata baby_item">
                    <div class='form_group'>
                        <label class='form_control'>宝宝姓名</label>
                        <input type='text' class='w270' name='u_name_baby' value="{%$value.childrenname|default:''%}" >
                    </div>
                    <div class='form_group gendar_2'>
                        <span class='form_control'>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
                        <label class='ordinary ordinary_focus'><input type='radio' name='gender' {%if $value.sex eq '男'%}checked{%/if%}   value='男'>男</label>
                        <label class='ordinary'><input type='radio' name='gender'  {%if $value.sex eq '女'%}checked{%/if%} value='女'>女</label>
                    </div>
                    <div class='form_group'>
                        <label class='form_control'>宝宝生日</label>
                        <!--生日年月日-->
                        <div name='babyBirthday' class='box'>
                            <select name='year'><option  value="{%$value.year|default:''%}" >{%$value.year|default:''%}</option></select>
                            <select name='month'><option value="{%$value.month|default:''%}">{%$value.month|default:''%}</option></select>
                            <select name='day'><option value="{%$value.day|default:''%}">{%$value.day|default:''%}</option></select>
                        </div>
                    </div>
                    <span class="close" attrid="{%$value.cid|default:0%}" onclick="deleteElement(this);"></span>
                </div>
                {%/foreach%}
                {%else%}
                <div name="baby_1" class="babydata">
                    <div class='form_group'>
                        <label class='form_control'>宝宝姓名</label>
                        <input type='text' class='w270' name='u_name_baby' >
                    </div>
                    <div class='form_group gendar_2'>
                        <span class='form_control'>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
                        <label class='ordinary ordinary_focus'><input type='radio' name='gender' value='男'>男</label>
                        <label class='ordinary'><input type='radio' name='gender' value='女'>女</label>
                    </div>
                    <div class='form_group'>
                        <label class='form_control'>宝宝生日</label>
                        <!--生日年月日-->
                        <div name='babyBirthday' class='box'>
                            <select name='year'></select>
                            <select name='month'></select>
                            <select name='day'>
                                <option value='0'>日</option>
                            </select>
                        </div>
                    </div>
                </div>
                {%/if%}
            </div>
            <div class="test"></div>
            <span class="addBaby">+增加一个宝贝</span>
            <div class="agreement">
                <span id="gouBg" class="gou_bg"></span>
                <span>我已阅读并同意<em>会员章程</em>和<em>隐私政策</em></span>
            </div>
            <div class="form_btn">
                <span class="tj_btn">提交</span>

            </div>

            <!--添加一个宝宝弹层-->
            <div class="addBaby_pop dno">
                <div class="inner_bg">
                    <span class="close"></span>
                    <div class="baby_info">
                        <div class="form_group">
                            <label class="form_control">宝宝姓名</label>
                            <input type="text" class="w270" id="username_baby2" name="u_name_baby2" >
                        </div>
                        <div class="form_group gendar_3">
                            <span class="form_control">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span>
                            <label for="c_male" class="ordinary ordinary_focus"><input type="radio" name="b_gender" id="c_male" value="男">男</label>
                            <label for="c_female" class="ordinary"><input type="radio" name="b_gender" id="c_female" value="女">女</label>
                        </div>
                        <div class="form_group">
                            <label class="form_control">宝宝生日</label>
                            <!--生日年月日-->
                            <div id="box_c" class="box">
                                <select name="sel1_c" id="sel1_c">
                                    <option selected value="year">年</option>
                                </select>
                                <select name="sel2_c" id="sel2_c">
                                    <option selected value="month">月</option>
                                </select>
                                <select name="sel3_c" id="sel3_c">
                                    <option selected value="day">日</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <span class="tj_btn">确定</span>

                </div>
            </div>
            <!--添加一个宝宝弹层结束-->
        </div>
    </div>
</section>
<div class="pop_item pop_success dno">
    <div class="wrap_item_pop">
        <span class="close"></span>
        <div class="inner_pop">
            <img src="/main/img/ewm.jpg" class="ewm">
        </div>
    </div>

</div>
</body>

<script src="/main/js/jquery.cityselect.js"></script>
<script src="/main/js/common.js"></script>
<script src="/main/js/date.selector.js"></script>
<script>
    var currentBabyNo = 1;
    $(function () {
        checkweichatevent();
        initDateSelector("myBirthday");
        initDateSelector("babyInfo div[name='baby_1'] div[name='babyBirthday']");
        dateSelector.init($("#sel1_c"), $("#sel2_c"), $("#sel3_c"));
        $("#babyInfo").html();
        citySelect();
        initGenderEvent();
        $(".pop_success .close").on('click',closePopSuccess);
        $(".addBaby_pop .close").on('click',hideBabyPop);
        $(".form_info .addBaby").on('click',showBabyPop);


        $(".addBaby_pop .tj_btn").on('click',addBabyInfo);
        $(".form_btn .tj_btn").on('click',registerFn);


    })

    function initDateSelector(selectParentIdName){
        _year = $("#" + selectParentIdName + " select[name='year']");
        _month = $("#" + selectParentIdName + " select[name='month']");
        _day = $("#" + selectParentIdName + " select[name='day']");
        dateSelector.init(_year, _month, _day);

    }






    /**
     * 城市三级联动
     */
    function citySelect(){
        $("#city").citySelect({
            url:"/main/js/city.min.js",
            prov:"{%$user.region|default:null%}",
            city:"{%$user.city|default:null%}",
            dist:"{%$user.area|default:null%}",
            nodata: "none",
            required: false,
        });

    }

    function initGenderEvent(){
        $('input[name="gender"]').on('click',function(){
            $(this).parents('.form_group').find('.ordinary').removeClass('ordinary_focus');
            $(this).parent().addClass('ordinary_focus')
        });

        $('input[name="b_gender"]').on('click',function(){
            $(this).parents('.form_group').find('.ordinary').removeClass('ordinary_focus');
            $(this).parent().addClass('ordinary_focus')
        });
    }



    /**
     * 关闭注册成功页面
     */
    function closePopSuccess(){
        $(".pop_success").fadeOut();
    }


    /**
     * 显示添加宝宝弹层
     */
    function showBabyPop(){
        $('#username_baby2').val("");
//        $('#sel1_c').val("0");
//        $('#sel2_c').val("0");
        $('#sel3_c').val("0");
        $(".addBaby_pop").fadeIn();
    }

    /**
     * 显示添加宝宝弹层
     */
    function hideBabyPop(){
        $(".addBaby_pop").fadeOut();
    }






    /*
     添加一个宝宝信息资料
     */
    function addBabyInfo(){
        if (!checkTable()) {
            return false;
        }
        var username_baby2 = $.trim($('#username_baby2').val());
        var gendar_3 = $(".gendar_3 .ordinary_focus input").val();
        var sel1_c = $.trim($('#sel1_c').val());
        var sel2_c = $.trim($('#sel2_c').val());
        var sel3_c = $.trim($('#sel3_c').val());
        //关闭弹层,将弹层中的内容追加
        hideBabyPop();
        var babyInfoHtml = $("#babyInfo div[name='baby_1']").html();
        $("#babyInfo").append("<div name='baby_"+(++currentBabyNo)+"'  attrid='0' class='babydata baby_item'>"+babyInfoHtml+"<span class='close' attrid='0'  onclick='deleteElement(this);'></span></div>");
        var newBabyHtml = $("#babyInfo div[name='baby_"+currentBabyNo+"']");
        console.log(newBabyHtml);
        initGenderEvent();
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] input[name='u_name_baby']").val(username_baby2);
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] input[value='"+gendar_3+"']").trigger("click")
        initDateSelector("babyInfo div[name='baby_"+currentBabyNo+"'] div[name='babyBirthday']");
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] div[name='babyBirthday'] select[name='year']").val(sel1_c);
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] div[name='babyBirthday'] select[name='month']").val(sel2_c);
        $("#babyInfo div[name='baby_"+currentBabyNo+"'] div[name='babyBirthday'] select[name='day']").val(sel3_c);

    }

    function checkTable() {
        if ($('#username_baby2').val() == '') {
            alert("请输入宝宝姓名");
            return false;
        }
        if($("#sel1_c option:selected").val() == 0 || $("#sel2_c option:selected").val() == 0 || $("#sel3_c option:selected").val() == 0 ){
            alert('请输入完整的宝宝生日年月日');
            return false;
        }
        return true;
    }

    /**
     * 注册
     */
    function registerFn(){
        if (!checkTable2()) {
            return false;
        }
        var babydata={};
        $(".babydata").each(function (k,v) {
            var cid =v.getAttribute('attrid');
            var childrenname =v.querySelector('input[type=text]');
            var sex =v.querySelector('input[type=radio]');
            var year  =v.querySelector('select[name=year]');
            var month  =v.querySelector('select[name=month]');
            var day  =v.querySelector('select[name=day]');
            babydata[k]={cid:cid,childrenname:childrenname.value,sex:sex.value,birthday:year.value+'/'+month.value+'/'+day.value}
        })
        if(!babydata){
            alert("请填写宝宝信息");
            return false;
        }

        var u_name = $.trim($('#username').val());
        var u_mobile = $.trim($('#mobile').val());

        var gendar_1 = $(".gendar_1 .ordinary_focus input").val();
        var u_province = $.trim($('.prov').val());
        var u_city = $.trim($('.city').val());
        var u_dis = $.trim($('.dist').val());
        var _data={
            tk_name:"{%$tk_name%}",
            tk_value:"{%$tk_value%}",
            username:u_name,
            mobile:u_mobile,
            sex:gendar_1,
            region:u_province,
            city:u_city,
            area:u_dis,
            babydata:babydata
        }
        $.post('/api/saveuserinfo.json',_data,function (data, textStatus, jqXHR) {
            if(jqXHR.status==200){
                alert(jqXHR.responseText);
                dorefulsh();
            }else{
                alert(jqXHR.responseText);
                dorefulsh();
            }
        })


    }


    var bool=true;
    function checkTable2(){
        if ($('#username').val() == '') {
            alert("请输入您的姓名");
            return false;
        }
        var tel = $('#mobile').val();
        var regx = /^1\d{10}$/;
        if (!regx.test(tel)) {
            alert('请输入正确您的手机号');
            return false;
        }
        if($('#code').val() == ''){
            alert('验证码不能为空');
            return false;
        }

        if($(".prov option:selected").val() == '' || $(".city option:selected").val() == '' || $(".dist option:selected").val() == ''){
            alert('请输入完整省市区地址');
            return false;
        }
        if($("#username_baby").val() == ''){
            alert("请输入宝宝姓名");
            return false;
        }

        if(!bool){
            alert('请同意并勾选会员章程和隐私政策');
            return false;
        }
        return true;
    }
    /**
     * 删除添加的宝宝整条信息
     */
    function deleteElement(Obj){

        if(parseInt(Obj.getAttribute('attrid'))==0){
            Obj.parentNode.parentNode.removeChild(Obj.parentNode);
            initelement();
        }else{
            $.post('/api/deletechildren.json',{cid:parseInt(Obj.getAttribute('attrid'))},function (data, textStatus, jqXHR) {
                if(jqXHR.status==200){
                    Obj.parentNode.parentNode.removeChild(Obj.parentNode);
                    initelement();

                }else{
                    alert(jqXHR.responseText);
                }
            })
        }





    }
    function initelement() {
        var  babydatacount=$(".babydata").length;
        if(babydatacount==0){
        refulsh();
        }
    }
</script>
</html>